import React, { useState } from 'react'
import IconMap from '@/components/IconMap';
import { loginRules } from '@/utils/rules';
import http from "@/services"
export default function AcountLogin({ FormItem, Input, Button, form }) {
    const InitTimes = 60;
    const [IsCode, setIsCode] = useState(true);
    const [currentStatus, setcurrentStatus] = useState(false);
    let [currentTime, setcurrentTime] = useState(InitTimes)
    //Input修改内容进行监听
    async function handleChange(e) {
        try {
            const data = await form.validateFields(['mobile']);
            if (data.mobile) {
                setIsCode(false);
            }
        } catch (err) {
            setIsCode(true);
        }
    }
    // 倒计时
    async function CountDown() {
        setcurrentStatus(true);
        setIsCode(true);
        const mobile = form.getFieldValue("mobile");
        const data = await http.getCode(mobile);
        const times = setInterval(() => {
            if (currentTime == 0) {
                setcurrentStatus(false);
                setIsCode(false);
                setcurrentTime(InitTimes);
                clearInterval(times);
                return;
            }
            setcurrentTime(--currentTime);
        }, 1000)
    }
    return (
        <>
            <FormItem hasFeedback name="mobile" rules={loginRules.mobileRule} key="mobile">
                <Input placeholder="请输入您的手机号码" prefix={IconMap.mobileIcon} onChange={handleChange}></Input>
            </FormItem>
            <FormItem hasFeedback name="code" rules={loginRules.codeRule} key="code">
                <Input
                    type="password"
                    placeholder="请输入验证码"
                    prefix={IconMap.codeIcon}
                    addonAfter={<Button
                        disabled={IsCode}
                        onClick={CountDown}
                    >{currentStatus ? `${currentTime}秒后重新发送` : "发送验证码"}</Button>}></Input>
            </FormItem>
        </>
    )
}
